<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>前台登录</title>
</head>
<link rel="stylesheet" href="../js/easyui/themes/default/easyui.css"/>
<link rel="stylesheet" href="../js/easyui/themes/icon.css"/>
<link rel="stylesheet" href="../js/easyui/themes/color.css"/>
<link rel="stylesheet" href="../js/bootstrap3/css/bootstrap.min.css">
<script src="../js/easyui/jquery.min.js"></script>
<script src="../js/easyui/jquery.easyui.min.js"></script>
<script src="../js/easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="../js/bootstrap3/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../js/bootstrap-bootbox/bootbox.js"></script>
<style>
    body {
        background: #ebebeb;
        font-family: "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei","\9ED1\4F53", Arial, sans-serif;
        color: #222;
        font-size: 12px;
    }

    * {
        padding: 0px;
        margin: 0px;
    }

    .top_div {
        background: #008ead;
        width: 100%;
        height: 400px;
    }

    .ipt {
        border: 1px solid #d3d3d3;
        padding: 10px 10px;
        width: 290px;
        border-radius: 4px;
        padding-left: 35px;
        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
        -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow
        ease-in-out .15s;
        -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out
        .15s;
        transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s
    }

    .ipt:focus {
        border-color: #66afe9;
        outline: 0;
        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px
        rgba(102, 175, 233, .6);
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px
        rgba(102, 175, 233, .6)
    }

    .u_logo {
        background: url("../images/username.png") no-repeat;
        padding: 10px 10px;
        position: absolute;
        top: 43px;
        left: 63px;
    }

    .p_logo {
        background: url("../images/password.png") no-repeat;
        padding: 10px 10px;
        position: absolute;
        top: 12px;
        left: 63px;
    }

    a {
        text-decoration: none;
    }

    .tou {
        background: url("../images/tou.png") no-repeat;
        width: 97px;
        height: 92px;
        position: absolute;
        top: -87px;
        left: 140px;
    }

    .left_hand {
        background: url("../images/left_hand.png") no-repeat;
        width: 32px;
        height: 37px;
        position: absolute;
        top: -38px;
        left: 150px;
    }

    .right_hand {
        background: url("../images/right_hand.png") no-repeat;
        width: 32px;
        height: 37px;
        position: absolute;
        top: -38px;
        right: -64px;
    }

    .initial_left_hand {
        background: url("../images/hand.png") no-repeat;
        width: 30px;
        height: 20px;
        position: absolute;
        top: -12px;
        left: 100px;
    }

    .initial_right_hand {
        background: url("../images/hand.png") no-repeat;
        width: 30px;
        height: 20px;
        position: absolute;
        top: -12px;
        right: -112px;
    }

    .left_handing {
        background: url("../images/left-handing.png") no-repeat;
        width: 30px;
        height: 20px;
        position: absolute;
        top: -24px;
        left: 139px;
    }

    .right_handinging {
        background: url("../images/right_handing.png") no-repeat;
        width: 30px;
        height: 20px;
        position: absolute;
        top: -21px;
        left: 210px;
    }
</style>



<script type="text/javascript">
    $(function() {
        //得到焦点
        $("#password").focus(function() {
            $("#left_hand").animate({
                left : "150",
                top : " -38"
            }, {
                step : function() {
                    if (parseInt($("#left_hand").css("left")) > 140) {
                        $("#left_hand").attr("class", "left_hand");
                    }
                }
            }, 2000);
            $("#right_hand").animate({
                right : "-64",
                top : "-38px"
            }, {
                step : function() {
                    if (parseInt($("#right_hand").css("right")) > -70) {
                        $("#right_hand").attr("class", "right_hand");
                    }
                }
            }, 2000);
        });
        //失去焦点
        $("#password").blur(function() {
            $("#left_hand").attr("class", "initial_left_hand");
            $("#left_hand").attr("style", "left:100px;top:-12px;");
            $("#right_hand").attr("class", "initial_right_hand");
            $("#right_hand").attr("style", "right:-112px;top:-12px");
        });
    });
</script>



<META name="GENERATOR" content="MSHTML 11.00.9600.17496">
</html>

<BODY>

<div class="top_div"></div>

<div
        style="background: rgb(255, 255, 255); margin: -100px auto auto; border: 1px solid rgb(231, 231, 231); border-image: none; width: 400px; height: 336px; text-align: center;">

    <div style="width: 165px; height: 96px; position: absolute;">

        <div class="tou"></div>

        <div class="initial_left_hand" id="left_hand"></div>

        <div class="initial_right_hand" id="right_hand"></div>
    </div>
    <form id="form1"  method="post">
        <P style="padding: 30px 0px 10px; position: relative;">
            <span class="u_logo"></span> <input class="ipt" id="loginNumber" name="userPhone" type="text"
                                                placeholder="请输入电话号，13、15、18开头" value="">

        </P>

        <P style="position: relative;">
            <span class="p_logo"></span>
            <input class="ipt" name="userPwd" id="password" type="password" placeholder="请输入密码" value="">
        </P>

        <P style="position: relative;">
            <span class="p_logo"></span>
            <span class="ipt">
                <input name="userType" type="radio" value="1">买家
                <input name="userType" type="radio" value="2">卖家
            </span>

        </P>

        <P style="position: relative;">
            <input class="ipt" name="checkCode"
                   style="width: 37%;float: left;margin-left: 54px;margin-top: 10px;"
                   type="text" placeholder="请输入验证码" value="" id="veriftyCode">
            <img onclick="changerVeriftyCode()" id="verificationCode" src="../user/imgcode" style="width: 22%;height: 35px;float: left;margin: 11px 5px;"/>
            <a href="javascript:changerVeriftyCode();" style="float: left;line-height: 57px;">换一张</a>
        </P>
    </form>

    <div
            style="height: 50px; line-height: 50px; margin-top: 68px; border-top-color: rgb(231, 231, 231); border-top-width: 1px; border-top-style: solid;">

        <P style="margin: 0px 35px 20px 45px;">
				<span style="float: left;"><A
                        style="color: rgb(204, 204, 204);" href="javascript:alert('向此卡号[10088208820]充值100万元即可解锁新密码！')">忘记密码?</A>
				</span> <span style="float: right;">
                <a th:href="@{../user/toRegister}" style="color: rgb(204, 204, 204); margin-right: 10px;"  >注册</a>
					<span style="background: rgb(0, 142, 173);cursor:pointer; padding: 7px 10px; border-radius: 4px; border: 1px solid rgb(26, 117, 152); border-image: none; color: rgb(255, 255, 255); font-weight: bold;" id="loginBtn">登录</span> </span>
        </P>
    </div>
</div>
<script type="text/javascript">
    //刷新验证码点击事件
    function changerVeriftyCode(){
        $('#verificationCode').attr('src','../user/imgcode?t='+new Date().getTime());
    }
    //登录事件
    $('#loginBtn').click(function(){

        if (!checkName() || !checkPwd() || !checkType() || !checkYZM()){
            return false;
        }

        //身份不同登录不同--表没设计好，只能这样烂尾了
        if($("input[name='userType']:checked").val()==1){
            $.ajax({
                url:"../buyer/login",
                type:'post',
                data:$("#form1").serialize(),
                dataType:'json',
                success:function(result){
                    if(result.code == 0){
                        window.location.href='../shouye/index';
                    }else{
                        //$.messager.alert('提示',result.msg,'info');
                        alert(result.msg);
                    }
                }
            })
        }else {
            $.ajax({
                url:"../seller/login",
                type:'post',
                data:$("#form1").serialize(),
                dataType:'json',
                success:function(result){
                    if(result.code == 0){
                        window.location.href='../shouye/index';
                    }else{
                        //$.messager.alert('提示',result.msg,'info');
                        alert(result.msg);
                    }
                }
            })
        }

    })

    //校验用户名是否为空
    $("#loginNumber").blur(checkName=function (){
        var nameVal = $("#loginNumber").val();
        if(nameVal==null || nameVal==''){
            alert("电话号不能为空！");
            return false;
        }
        var reg = /^1[358][0-9]{9}$/;//13*、15*、18*、
        if (!reg.test(nameVal)){
            alert("输入不规范，请重新输入！");
        }
        return true;
    })
    //校验密码是否为空
    $("#password").blur(checkPwd=function (){
        var pwdVal = $("#password").val();
        if(pwdVal==null || pwdVal==''){
            alert("密码不能为空！");
            return false;
        }
        return true;
    })
    //校验身份是否选择
    function checkType(){
        var type = $("input[name='userType']:checked").val();
        if(type==1 || type==2){
            return true;
        }else {
            alert("请选择身份");
            return false;
        }

    }
    //校验验证码是否为空
    $("#veriftyCode").blur(checkYZM=function (){
        var yzmVal = $("#veriftyCode").val();
        if(yzmVal==null || yzmVal==''){
            alert("验证码不能为空！");
            return false;
        }
        return true;
    })
    /*
    登陆结束
     */

    /*
    注册开始
     */
    //打开新增浮动页面
    function openAddAdmin(){
        bootbox.dialog({
            size:"big",		//设置浮动页面大小 small-小	big-大
            title:"新增管理员",
            message:createAddAdmin("../admin/toReg"),
            closeButton:true,	//是否显示取消按钮，右上角的
            buttons:{
                'success':{
                    "label":"<i class='icon-ok'></i>提交",
                    "className":"btn-sm btn-success",
                    "callback":function(){
                        /*if(aaa){
                            alert("有字段未选择")
                            return false;
                        }*/
                        $.ajax({
                            url:"../admin/addAdmin",
                            type:"post",
                            data:$("#addForm").serialize(),
                            success:function(data){
                                //$("#myTable").bootstrapTable("refresh");
                                //initTable();
                                alert("恭喜你，注册成功！")
                                location.href="../backstage/login";
                            },error:function(){
                                alert("注册失败！");
                            }
                        })
                    }
                },
                'cancle':{
                    "label":"<i class='icon-info'></i>取消",
                    "className":"btn-sm btn-danger",
                    "callback":function(){

                    }
                }
            }
        })
    }

    //创建添加页面
    var res;
    function createAddAdmin(url){
        $.ajax({
            url: url,
            async:false,
            success:function(data){
                res=data;
            }
        })
        return res;
    }
    /*
    注册结束
     */
</script>
<div style="text-align:center;"></div>
</BODY>